<template>
  <div>
      <!-- 提示登录弹出框 -->
      <div id="TCK" @click.self="tckshowF">
        <div class="tck">
          <img src="https://wap.365msmk.com/img/feiji.decaf161.png" alt />
          <p>赶紧登录一下吧</p>
          <p>立即预约一对一辅导，浏览更多视频课程~</p>
          <button @click="denglu">立即登录</button>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    methods:{
        tckshowF(){
            this.$emit('tckshowF')
        },
        denglu(){
            this.$emit('denglu')
        }
    }
}
</script>
<style lang="scss" scoped>
#TCK {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  .tck {
    width: 80%;
    background: #fff;
    border-radius: 30px;
    margin: 0 auto;
    margin-top: 30%;
    img {
      width: 100%;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
    }
    p {
      text-align: center;
    }
    button {
      width: 62.93333vw;
      height: 1.06667rem;
      height: 10.66667vw;
      background: #eb6100;
      border-radius: 5.33333vw;
      font-size: 4vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #fff;
      line-height: 10.66667vw;
      margin-top: 7.6vw;
      border: none;
      margin: 6.66667vw 8.66667vw;
    }
  }
}
</style>